<template>
	<div class="zxyh-anchor-more" :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
		<ZxyhHeader v-if="$channel == 'zxyh' && getPlatform == 'app'" :title="'主播风采'" :isClose='false'></ZxyhHeader>
		<div v-else class="list-header">
			<div class="header-left">
				<p class="header-title">主播风采</p>
			</div>
		</div>
		<div class="list-connect">
			<ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
				<li v-for="(v,index) in anchorFCArray" :key='index' :style="{background : skinInfo.backImg || skinInfo.backColor ? 'rgba(255, 255, 255, 0.4)' : '#FFFFFF'}" @click="goToAnchorPage(v.contentType,v.id)">
					<div class="img-box">
						<img :src="v.zbHeadImg+'?x-oss-process=image/resize,m_fixed,h_199,w_350'" alt />
					</div>
					<div class="text-box">
						<p class="title-box">{{v.title}}</p>
						<p><span>{{v.zbIntro}}</span></p>
						</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import ZxyhHeader from '@/components/zxyh/zxyhHeader'
	export default {
		components:{
		 ZxyhHeader
		},
		props: {},
		data() {
			return {
				anchorFCArray: [], //主播风采数组
				page: 0,
				com_box: '',
				h_title: '',
				busy: false, //打开滚动
				getPlatform:fun.getPlatform(), //app wx
				scroll:0,//页面滚动高度
			}
		},
		computed: {
			skinInfo() {
				return this.$store.state.skinStoreInfo
			}
		},
		created() {
			this.$store.dispatch("hideNav");
			fun.dotNum('anchorMorePage')
		},
		mounted() {},
		activated() {
			this.$store.dispatch("hideNav");
			document.getElementsByClassName( "list-connect")[0].scrollTop = this.scroll;//设置滚动
		},
		beforeRouteLeave(to, from, next) {
			if(from.path == `/${this.$channel}/starAnchorMore` && to.path ==`/${this.$channel}/zxyhHome`){
				this.scroll = 0 //再次进入明星主播页回到顶部
			}else{				
				this.scroll = document.getElementsByClassName( "list-connect")[0].scrollTop;
			} 
		   next();
		},
		methods: {
			loadMore: function() {
				this.busy = true;
				// 多次加载数据

				//this.tipText = "数据加载中..."
				setTimeout(() => {
					this.page++;
					this.getAnchorArray();
				}, 200);

			},
			//主播风采top
			getAnchorArray() {
				this.$http.get("/h5live/getZhuBoList", {
						params: {
							p: this.page,
							pSize: 10
						}
					})
					.then(res => {
						if(res.data.code == "000000") {
							if(res.data.data) { //防止null
								if(res.data.data.length){
									this.anchorFCArray = [...this.anchorFCArray, ...res.data.data];
									this.busy = false;
									if(res.data.data.length<10){
										this.busy = true;//禁用 没有更多数据了
										//fun.toastMessage('没有更多数据了')
									}
								}

							}
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			goToAnchorPage(type,id) {
				if(type === '1') { //内容
					this.$router.push({
						path: `/${this.$channel}/connectShow`,
						query: {
							id: id
						}
					});
				} else if(type === '2') { //视频
					this.$router.push({
						path: `/${this.$channel}/videoMiddleBgBlackPlay`,
						query: {
							id: id
						}
					});
				} else {
					console.log('暂无明星主播类型')
				}
			}
		}
	};
</script>

<style scoped="scoped">
	.iconyoujiantou1 {
		transform: rotate(180deg);
		margin-left: 25px;
		font-size: 28px;
	}

	.zxyh-anchor-more {
		width: 100vw;
		height: 100vh;
		background-size: 100% 1334px !important;
	}

	.list-header {
		width: 100vw;
		height: 80px;
		/*background: darkgray;*/
		display: flex;
		align-items: center;
		/*padding: 0 30px;*/
	}

	.header-left,
	.header-right {
		height: 80px;
		flex: 1;
		display: flex;
		align-items: center;
	}

	.header-right {
		justify-content: flex-end;
		margin-right: 45px;
	}

	.header-title {
		width: 100vw;
		height: 80px;
		font-size: 34px;
		font-weight: 500;
		color: #333333;
		text-align: center;
		line-height: 80px;
	}

	.header-more {
		font-size: 22px;
		font-weight: 300;
		color: rgba(102, 102, 102, 1);
		line-height: 40px;
		margin-right: 6px;
	}

	.list-connect {
		width: 100vw;
		height: calc(100vh - 88px);
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 10px;
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		margin-top: 148px;
	}
	.header-conatiner-zxyhIos + .list-connect{
       height: calc(100vh - 148px);
	}

	.zxyh-anchor-more .header-conatiner-zxyhIos,
.header-conatiner {
  background: url('https://saas-zxyhzb.oss-cn-shenzhen.aliyuncs.com/yidong/20211222/1640158691116.png') no-repeat left top;
  background-size: cover;
}

	.list-connect ul {
		display: flex;
		flex-wrap: wrap;
		padding-top: 30px;
		padding-bottom: 20px;
		/*-webkit-flex-wrap: wrap;*/
	}

	.list-connect ul li {
		width: 100%;
		display: flex;
		/* padding: 20px 15px; */
        margin-bottom: 20px;
		border-radius: 24px;
	}

	.img-box{
		width: 382px;
        height: 214px;
		margin-right: 20px;
	}
	.img-box img{
		width: 100%;
        height: 100%;
		border-radius: 24px;
	}
	.text-box{
		flex: 1;
	}
	.text-box .title-box{
		width: 100%;
		height: 140px;
		padding-top: 20px;
		margin-bottom: 20px;
		padding-right: 10px;
		text-overflow:ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:3;
		overflow: hidden;
		font-size: 28px;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 42px; 
	}
	.text-box p{
		font-size: 24px;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.5);
	}
	.zxyh-anchor-more header,.zxyh-anchor-more >>>.header-empty,.zxyh-anchor-more >>>.header-box{
		background: none;
	}
</style>
